<template>
  <div class='goods-info'>
    <Film-title title='商品详情'></Film-title>
    <van-swipe
      @change="onChange"
      :autoplay="3000"
    >
      <van-swipe-item
        v-for="img in imgs"
        :key="img"
      >
        <img
          :src="img"
          alt=""
        >
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/5</div>
      </template>
    </van-swipe>

    <div class="detail-describe">
      <div class="detail-price-wrap">
        <div class="detail-sale-price"><span>¥</span>138</div>
        <div class="price-origin-price">原价198</div>
      </div>
      <div class="detail-title">武庚纪银饰系列</div>
      <div class="detail-derivative">
        <div class="detail-derivative-item">正版授权</div>
      </div>
    </div>
    <div class="detail-group-container">
      <van-tabs
        v-model="active"
        line-width='30px'
      >
        <van-tab title="商品详情">商品详情</van-tab>
        <van-tab title="购买须知">购买须知</van-tab>
        <van-tab title="相关推荐">相关推荐</van-tab>
      </van-tabs>
      <div class="detail-content">
        <div class="content-title">套餐详情</div>
        <div class="content-menu">
          <div class="menu-item">
            <div class="menu-item-wrap">
              <div class="menu-item-content">
                <div class="menu-name">武庚纪银饰系列</div>
                <div class="menu-amount">1个</div>
                <div class="menu-price">¥198</div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-brand">
          <div class="brand-item">品牌：<span>幸运石</span></div>
          <div class="brand-item">产地：<span>广东汕头</span></div>
        </div>
        <div class="detail-img"><img
            alt=""
            src="//p0.meituan.net/movie/383b522f45b8f1c1a4f22aba3b6d85d1117240.jpg"
            class=""
            style=""
          ><img
            alt=""
            src="//p0.meituan.net/movie/bbbe020119d06487c9683304062f9b02129257.jpg"
            class=""
            style=""
          ><img
            alt=""
            src="//p1.meituan.net/movie/46be640cdcbc40e58fce4998ab7c903b148660.jpg"
            class=""
            style=""
          ><img
            alt=""
            src="//p0.meituan.net/movie/cda87680bf7623c819b95327b8f3226e103386.jpg"
            class=""
            style=""
          ><img
            alt=""
            src="//p0.meituan.net/movie/498dbf262943a6ac8109ef37546d2cce101956.jpg"
            class=""
            style=""
          ><img
            alt=""
            src="//p0.meituan.net/movie/834fa15a0f6afdd5d5488fdbd0a7da6538297.jpg"
            class=""
            style=""
          ></div>

      </div>
      <div class="buy-note">
        <div class="note-item-content">
          <div class="note-content-title">售后须知</div>
          <div>本产品由汕头市恒田网络科技有限公司负责发货，并提供售后服务</div>
        </div>
        <div class="note-item-content">
          <div class="note-content-title">商家QQ</div>
          <div>3433065787</div>
        </div>
        <div class="note-item-content">
          <div class="note-content-title">产品咨询</div>
          <div>商家电话：0754-89652651；联系时间：09:00-18:00</div>
        </div>
        <div class="note-item-content">
          <div class="note-content-title">配送范围</div>
          <div>全国（除港澳台外）均可配送</div>
        </div>
        <div class="note-item-content">
          <div class="note-content-title">快递公司</div>
          <div>本单使用申通快递（400-889-5543）、中通快递（400-827-0270）、圆通快递（95554/021-69777888）</div>
        </div>
        <div class="note-item-content">
          <div class="note-content-title">配送费用</div>
          <div>本单包邮，配送范围内无需再额外支付邮费</div>
        </div>
        <div class="note-item-content">
          <div class="note-content-title">配送时段</div>
          <div>下单后 2-3 天</div>
        </div>
        <div class="note-item-content">
          <div class="note-content-title">售后保障</div>
          <div>如需退换货，请进入我的订单</div>
        </div>
      </div>
      <div class="relevant-recommend">
        <div class="detail-recommend-title">相关推荐</div>
        <div class="three-cloumn-container">
          <div class="three-deal-row">
            <div class="three-deal-cell">
              <div
                class="good-container"
                style="background: rgb(255, 255, 255);"
              >
                <div class="good-head"><img
                    alt=""
                    src="//p1.meituan.net/movie/098b35201ff41622b215eb8dd186d95c112761.jpg@348w_348h_2e"
                    class=""
                    style=""
                  ></div>
                <div class="good-describe">武庚纪银饰系列</div>
                <div class="good-price">
                  <div class="sale-price">¥138</div>
                  <div class="origin-price">¥198</div>
                </div>
              </div>
            </div>
            <div class="three-deal-cell">
              <div
                class="good-container"
                style="background: rgb(255, 255, 255);"
              >
                <div class="good-head"><img
                    alt=""
                    src="//p1.meituan.net/movie/8e06261f824a0b4fc3ab33ecdec517bf120001.jpg@348w_348h_2e"
                    class=""
                    style=""
                  ></div>
                <div class="good-describe">斗破苍穹萧薰儿系列饰品</div>
                <div class="good-price">
                  <div class="sale-price">¥149</div>
                  <div class="origin-price">¥208</div>
                </div>
              </div>
            </div>
            <div class="three-deal-cell">
              <div
                class="good-container"
                style="background: rgb(255, 255, 255);"
              >
                <div class="good-head"><img
                    alt=""
                    src="//p1.meituan.net/movie/5586d70944e7b4313cc468d6ab609fef155349.jpg@348w_348h_2e"
                    class=""
                    style=""
                  ></div>
                <div class="good-describe">哥斯拉长效保冷屏显保温杯</div>
                <div class="good-price">
                  <div class="sale-price">¥49</div>
                  <div class="origin-price">¥99</div>
                </div>
              </div>
            </div>
          </div>
          <div class="three-deal-row">
            <div class="three-deal-cell">
              <div
                class="good-container"
                style="background: rgb(255, 255, 255);"
              >
                <div class="good-head"><img
                    alt=""
                    src="//p1.meituan.net/movie/519b7ac3f230eb4a1070b4853065145c180300.jpg@348w_348h_2e"
                    class=""
                    style=""
                  ></div>
                <div class="good-describe">哥斯拉大战金刚亚克力钥匙扣</div>
                <div class="good-price">
                  <div class="sale-price">¥29.9</div>
                  <div class="origin-price">¥69</div>
                </div>
              </div>
            </div>
            <div class="three-deal-cell">
              <div
                class="good-container"
                style="background: rgb(255, 255, 255);"
              >
                <div class="good-head"><img
                    alt=""
                    src="//p1.meituan.net/movie/ed7e0de8572f99a6b834023d53a36147667122.jpg@348w_348h_2e"
                    class=""
                    style=""
                  ></div>
                <div class="good-describe">十二生肖本命年纯银项链礼物</div>
                <div class="good-price">
                  <div class="sale-price">¥199</div>
                  <div class="origin-price">¥219</div>
                </div>
              </div>
            </div>
            <div class="three-deal-cell">
              <div
                class="good-container"
                style="background: rgb(255, 255, 255);"
              >
                <div class="good-head"><img
                    alt=""
                    src="//p0.meituan.net/movie/bd5d437e3d65c7d30838f4c5a51fa993119281.jpg@348w_348h_2e"
                    class=""
                    style=""
                  ></div>
                <div class="good-describe">生肖牛年跳动的心纯银项链礼物</div>
                <div class="good-price">
                  <div class="sale-price">¥189</div>
                  <div class="origin-price">¥199</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="recommend-operation">
          <div class="recommend-operation-item">
            <div class="recommend-operation-title">更多</div>
            <div class="more-icon"></div>
          </div>
          <div class="recommend-operation-item">
            <div class="recommend-operation-title">换一批</div>
            <div class="fresh-icon"></div>
          </div>
        </div>
        <div class="buy-btn-container">
          <div
            class="buy-btn"
            @click="gotoOrder"
          >立即购买</div>
        </div>
      </div>
      <div class="footer-type2">
        <p class="phone">客服电话：1010-5335</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    active: 0,
    current: 0,
    imgs: ['https://p1.meituan.net/movie/098b35201ff41622b215eb8dd186d95c112761.jpg@750w_750h_2e',
      'https://p1.meituan.net/movie/b787939db9bfff7c2202eabdc833b7ec85841.jpg@750w_750h_2e',
      'https://p0.meituan.net/movie/6733f5211db5128fb1674ebb93389afa81342.jpg@750w_750h_2e',
      'https://p0.meituan.net/movie/3963fa3d0d1dc9108dd6aa4fa162f76b65327.jpg@750w_750h_2e',
      'https://p0.meituan.net/movie/0288123dc1716330527a18d1775a2ccd64290.jpg@750w_750h_2e']
  }),
  methods: {
    onChange(index) {
      this.current = index
    },
    gotoOrder() {
      this.$router.push('/order')
    }
  }
}
</script>
<style lang="scss">
.goods-info {
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .van-swipe {
    .van-swipe-item {
      width: 375px;
      height: 375px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .detail-describe {
    padding-bottom: 15px;
    background: #fff;
    .detail-price-wrap {
      display: flex;
      align-items: baseline;
      padding: 5px 15px 0;
      .detail-sale-price {
        font-family: PingFangSC-Medium;
        font-size: 30px;
        color: #ed3934;
      }
      .price-origin-price {
        margin-left: 12px;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #aaa;
        text-decoration: line-through;
      }
    }
    .detail-title {
      padding: 12px;
      font-size: 15px;
      color: #000;
    }
    .detail-derivative {
      padding: 0 15px;
    }
    .detail-derivative-item {
      position: relative;
      left: -4px;
      font-family: PingFangSC-Regular;
      display: inline-block;
      padding: 3px 3px;
      margin-top: 6px;
      color: #fa6400;
      font-size: 9px;
      transform: scale(0.9);
      background: rgba(250, 100, 0, 0.2);
      border-radius: 4px;
    }
  }
  .detail-group-container {
    margin-top: 10px;
    background: #fff;
    .van-tabs {
      .van-tab__text {
        font-size: 18px;
      }
    }

    .detail-content {
      margin: 0 15px;
      padding: 15px 0;
      border-bottom: 1px solid #ebeced;
      .content-title {
        padding-bottom: 15px;
        font-family: PingFangSC-Medium;
        font-size: 15px;
        color: #333;
      }
      .content-brand {
        padding-top: 15px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333;
        .brand-item {
          padding-bottom: 6px;
          span {
            color: #90969e;
          }
        }
      }
      .menu-item-wrap {
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #90969e;
        .menu-item-content {
          display: flex;
          padding: 12px 0;
          text-align: center;
          line-height: 1;
          border-top: 1px solid #e6e6e6;
          border-bottom: 1px solid #e6e6e6;
          .menu-name {
            flex: 3;
            text-align: left;
          }
          .menu-amount {
            flex: 1;
            border-left: 1px dashed #e6e6e6;
            border-right: 1px dashed #e6e6e6;
          }
          .menu-price {
            flex: 1;
          }
        }
      }
      .detail-img {
        font-size: 0;
        img {
          width: 100%;
        }
      }
    }
  }
  .buy-note {
    padding: 15px 15px 2px;
    background: #fff;
    line-height: 24px;
    font-size: 14px;
    .note-item-content {
      padding-bottom: 13px;
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #90969e;
    }
    .note-content-title {
      font-family: PingFangSC-Medium;
      color: #333;
    }
  }
  .detail-container + .footer-type2 {
    margin-bottom: 79px;
  }
  .footer-type1 .phone,
  .footer-type2 .phone {
    margin: 15px 0;
    text-align: center;
    color: #999;
    font-size: 12px;
  }
  .relevant-recommend {
    font-family: PingFangSC-Medium;
    font-size: 15px;
    color: #333;
    padding: 15px 15px 0;
    .detail-recommend-title {
      margin-bottom: 12px;
    }
    .three-cloumn-container {
      font-size: 0;
      .three-deal-row {
        display: flex;
        justify-content: space-between;
        justify-items: center;
        flex-wrap: no-wrap;
        .three-deal-cell {
          flex: 1;
          margin-right: 4px;
          .good-container {
            font-family: PingFangSC-Medium;
            margin-bottom: 15px;
            padding-bottom: 6px;
            border-radius: 6px;
            .good-head {
              position: relative;
              img {
                width: 100%;
                border-radius: 6px 6px 0 0;
              }
            }
            .good-describe {
              height: 37px;
              font-size: 13px;
              margin: 6px;
              overflow: hidden;
            }
            .good-price {
              display: flex;
              margin-left: 6px;
              align-items: center;
              .sale-price {
                font-size: 15px;
                color: #ed3934;
              }
              .origin-price {
                margin-left: 7px;
                font-size: 12px;
                color: #aaa;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
    .recommend-operation {
      display: flex;
      justify-content: center;
      margin-bottom: 17.5px;
      .recommend-operation-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 83px;
        height: 36px;
        margin: 0 7.5px;
        border: 1px solid #ebeced;
        border-radius: 18px;
        font-size: 0;
        background: #fff;
        .recommend-operation-title {
          font-size: 13px;
        }
        .more-icon {
          display: inline-block;
          width: 6px;
          height: 6px;
          border: 1px solid #90969e;
          border-width: 1px 1px 0 0;
          transform: rotate(45deg);
        }
        .fresh-icon {
          display: inline-block;
          width: 11px;
          height: 12px;
          margin-left: 5px;
          background: url();
          background-size: 100% 100%;
          background-repeat: no-repeat;
          vertical-align: middle;
        }
      }
    }
  }
  .buy-btn-container {
    bottom: 0;
    padding: 10px 15px;
    border: none;
    background: #fff;
    z-index: 999;
    .buy-btn {
      height: 49px;
      line-height: 49px;
      text-align: center;
      border-radius: 24.5px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #fff;
      background: #f03d36;
    }
  }
  .buy-btn-container,
  .fixedTop {
    position: fixed;
    left: 0;
    right: 0;
  }
  padding-bottom: 60px;
}
</style>
